<template>
	<view class="input-container">
		<!-- 自定义导航栏 -->
		<custom-navbar title="输入核销码"></custom-navbar>
		
		<!-- 输入区域 -->
		<view class="input-area">
			<view class="input-card" :class="{ 'expanded': showDetails }">
				<view class="input-section">
					<view class="input-label">输入核销码</view>
					<view class="input-wrapper">
						<input 
							type="text" 
							v-model="verificationCode" 
							placeholder="请输入核销码"
							class="input-field"
							@input="onCodeInput"
						/>
						<button class="identify-btn" @click="handleVerification" :disabled="!canVerify">识别</button>
					</view>
				</view>
				
			</view>
			
			<!-- 服务内容卡片 -->
			<view class="service-card" v-if="showDetails">
				<!-- 核销码显示 -->
				<view class="code-display">
					<text class="code-text">核销码 {{ verificationCode }}</text>
					<view class="divider"></view>
				</view>
				<view class="section-title">服务内容</view>
				<view class="service-list">
					<view class="service-item">XXX标准洗车服务包含</view>
					<view class="service-item">整车泡沫冲洗擦T</view>
					<view class="service-item">轮胎轮毂冲洗清洁</view>
					<view class="service-item">车内吸尘</view>
					<view class="service-item">内饰脚垫简单除尘</view>
					<view class="service-note">(不包含虫户、水泥、沥青和顽固污渍清理等)</view>
				</view>
			</view>
			
			<!-- 订单信息卡片 -->
			<view class="order-card" v-if="showDetails">
				<view class="section-title">订单信息</view>
				<view class="info-list">
					<view class="info-item">
						<text class="info-label">订单价格:</text>
						<text class="info-value">¥ 30.00</text>
					</view>
					<view class="info-item">
						<text class="info-label">实付金额:</text>
						<text class="info-value bold">¥ 25.00</text>
					</view>
					<view class="info-item">
						<text class="info-label">优惠金额:</text>
						<text class="info-value">¥ 5.00</text>
					</view>
					<view class="info-item">
						<text class="info-label">订单编号</text>
						<text class="info-value">2020032554565799</text>
					</view>
					<view class="info-item">
						<text class="info-label">支付时间</text>
						<text class="info-value">2020.03.30 14:40:45</text>
					</view>
					<view class="info-item">
						<text class="info-label">预约时间</text>
						<text class="info-value">2020.03.30 14:40</text>
					</view>
				</view>
			</view>
			
			<!-- 确认核销按钮 -->
			<view class="confirm-button" v-if="showDetails">
				<button class="main-confirm-btn" @click="handleMainButtonClick" :disabled="isVerified">
					{{ isVerified ? '已核销' : '确认核销' }}
				</button>
			</view>
		</view>
		
		<!-- 确认核销弹出框 -->
		<uni-popup ref="confirmDialog" type="center">
			<view class="confirm-dialog">
				<view class="dialog-title">核销此订单</view>
				<view class="dialog-message">
					<view class="message-line">请您仔细核对订单,此操作不可撤销</view>
					<view class="message-line">请谨慎操作!</view>
				</view>
				<view class="dialog-buttons">
					<button class="dialog-btn cancel-btn" @click="closeConfirmDialog">取消</button>
					<button class="dialog-btn confirm-btn" @click="confirmVerification">确认</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
export default {
	components: {
		'custom-navbar': () => import('@/components/custom-navbar.vue')
	},
	data() {
		return {
			verificationCode: '',
			showDetails: false,
			isVerified: false
		}
	},
	computed: {
		canVerify() {
			return this.verificationCode.trim().length >= 6
		}
	},
	methods: {
		// 输入核销码
		onCodeInput(e) {
			this.verificationCode = e.detail.value.toUpperCase()
		},
		
		// 核销验证
		handleVerification() {
			if (!this.canVerify) return
			
			// 显示加载中
			uni.showLoading({
				title: '识别中...'
			})
			
			// 模拟识别过程
			setTimeout(() => {
				uni.hideLoading()
				this.showDetails = true
			}, 1500)
		},
		
		// 处理主按钮点击
		handleMainButtonClick() {
			if (!this.isVerified) {
				this.showConfirmDialog()
			}
		},
		
		// 显示确认对话框
		showConfirmDialog() {
			this.$refs.confirmDialog.open()
		},
		
		// 关闭确认对话框
		closeConfirmDialog() {
			this.$refs.confirmDialog.close()
		},
		
		// 确认核销
		confirmVerification() {
			this.closeConfirmDialog()
			
			uni.showLoading({
				title: '核销中...'
			})
			
			// 模拟核销过程
			setTimeout(() => {
				uni.hideLoading()
				this.isVerified = true
				uni.showToast({
					title: '核销成功',
					icon: 'success'
				})
			}, 2000)
		}
	}
}
</script>

<style lang="scss" scoped>
.input-container {
	min-height: 100vh;
	background-color: #f5f5f5;
	padding-bottom: 120rpx;
	padding-top: calc(env(safe-area-inset-top) + 88rpx);
	position: relative;
	
	&::before {
		content: '';
		position: absolute;
		top: calc(env(safe-area-inset-top) + 88rpx);
		left: 0;
		right: 0;
		height: 600px;
		background-image: linear-gradient(
			to bottom,
			#2f81fa 0%, #2f81fa 33.33%,
			#f7f7f7 33.33%, #f7f7f7 100% 
		);
		background-repeat: no-repeat;
		z-index: 0;
	}
}

.input-area {
	position: relative;
	z-index: 1;
	padding: 40rpx 20rpx;
}

.input-card {
	background: #ffffff;
	height: 1200rpx;
	border-radius: 20rpx;
	padding: 40rpx 60rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
	transition: height 0.3s ease;
	overflow: hidden;
	
	&.expanded {
		height: 80rpx;
	}
	
	.input-section {
		display: flex;
		align-items: center;
		gap: 30rpx;
		margin-bottom: 30rpx;
		
		.input-label {
			font-size: 28rpx;
			font-weight: 500;
			color: #007AFF;
			white-space: nowrap;
			flex-shrink: 0;
		}
		
		.input-wrapper {
			position: relative;
			flex: 1;
			height: 80rpx;
			background: #ffffff;
			border: 1rpx solid #e0e0e0;
			border-radius: 40rpx;
			display: flex;
			align-items: center;
			overflow: hidden;
			min-width: 0;
			
			.input-field {
				flex: 1;
				height: 100%;
				background: transparent;
				border: none;
				padding: 0 24rpx 0 24rpx;
				font-size: 28rpx;
				color: #333333;
				min-width: 0;
				
				&::placeholder {
					color: #999999;
				}
			}
			
			.identify-btn {
				position: absolute;
				right: 0;
				top: 0;
				height: 100%;
				width: 160rpx;
				background: #007AFF;
				color: #ffffff;
				border: none;
				border-radius: 40rpx;
				font-size: 28rpx;
				font-weight: 500;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-shrink: 0;
				
				&:disabled {
					
					background: #cccccc;
					color: #999999;
				}
			}
		}
	}
	
}

.service-card, .order-card {
	background: #ffffff;
	border-radius: 20rpx;
	padding: 40rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
	
	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
		margin-bottom: 20rpx;
	}
}

.service-card {
	.code-display {
		margin-bottom: 20rpx;
		
		.code-text {
			font-size: 28rpx;
			color: #333333;
			margin-bottom: 16rpx;
			display: block;
		}
		
		.divider {
			height: 1rpx;
			background-color: #e0e0e0;
			width: 100%;
		}
	}
	
	.service-list {
		.service-item {
			font-size: 28rpx;
			color: #333333;
			margin-bottom: 12rpx;
			line-height: 1.5;
		}
		
		.service-note {
			font-size: 24rpx;
			color: #999999;
			margin-top: 16rpx;
			line-height: 1.5;
		}
	}
}

.order-card {
	.info-list {
		.info-item {
			display: flex;
			
			align-items: center;
			margin-bottom: 16rpx;
			
			.info-label {
				font-size: 28rpx;
				color: #333333;
			}
			
			.info-value {
				margin-left: 20rpx;
				font-size: 28rpx;
				color: #333333;
				
				&.bold {
					font-weight: bold;
				}
			}
		}
	}
}
.code-display{
	
}
.code-text{
	text-align: center;
	font-weight: 500;
	
	height: 60rpx;
	line-height: 60rpx;
	font-size: 37rpx !important;
	align-items: center;
}
.confirm-button {
	margin: 40rpx 0;
	
	.main-confirm-btn {
		width: 100%;
		height: 88rpx;
		background: #2f81fa;
		color: #ffffff;
		border: none;
		border-radius: 44rpx;
		font-size: 32rpx;
		font-weight: 600;
	}
	
	.main-confirm-btn:disabled,
	.main-confirm-btn[disabled] {
		background: #808080 !important;
		color: #ffffff !important;
		opacity: 1 !important;
	}
}

/* 确认对话框样式 */
.confirm-dialog {
	background: #ffffff;
	border-radius: 20rpx;
	padding: 40rpx;
	width: 600rpx;
	box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.2);
	
	.dialog-title {
		font-size: 32rpx;
		font-weight: 500;
					color: #333333;
		text-align: center;
		margin-bottom: 30rpx;
	}
	
	.dialog-message {
		margin-bottom: 40rpx;
		
		.message-line {
			font-size: 28rpx;
			color: #333333;
			text-align: center;
			line-height: 1.5;
			margin-bottom: 8rpx;
			
			&:last-child {
				margin-bottom: 0;
			}
		}
	}
	
	.dialog-buttons {
		display: flex;
		gap: 20rpx;
		
		.dialog-btn {
			flex: 1;
			height: 80rpx;
			border-radius: 12rpx;
			font-size: 28rpx;
			font-weight: 500;
			border: none;
			
			&.cancel-btn {
				background: #ffffff;
				color: #333333;
				border: 1rpx solid #e0e0e0;
			}
			
			&.confirm-btn {
				background: #2f81fa;
				color: #ffffff;
			}
		}
	}
}
</style>
